<template>
  <div>
    <div class="sortInfo">
      <van-sidebar v-model="activeKey" @change="changeCate">
        <van-sidebar-item
          v-for="item in catelist"
          :key="item.id"
          :title="item.catename"
        />
      </van-sidebar>
      <van-grid
        v-if="secondList.length > 0"
        :gutter="10"
        :column-num="3"
        :border="false"
      >
        <van-grid-item
          :to="'/goodslist?type=2&cateid=' + item.id"
          v-for="item in secondList"
          :key="item.id"
        >
          <img class="imgUrl" :src="item.img" alt="" />
          <p>{{ item.catename }}</p>
        </van-grid-item>
      </van-grid>
      <van-empty v-else description="暂无分类" />
    </div>
  </div>
</template>

<script>
import { getCateInfo } from "../util/request/api";
export default {
  data() {
    return {
      activeKey: 0, //点击之后选中的key
      catelist: [], //商品分类列表（一级）
      secondList: [], //商品的二级分类
    };
  },
  mounted() {
    getCateInfo().then((res) => {
      console.log(res.data);
      if (res.data.code == 200) {
        this.catelist = res.data.list;
        console.log(this.catelist);
        this.secondList = this.catelist[this.activeKey].children;
      }
    });
  },
  methods: {
    changeCate(n) {
      this.secondList = this.catelist[n].children
        ? this.catelist[n].children
        : [];
    },
  },
};
</script>

<style  scoped>
.imgUrl {
  width: 60px;
  height: 60px;
}
.sortInfo {
  display: flex;
}
.van-grid {
  flex: 1;
}
.van-grid-item {
  height: 1rem;
  margin-top: 30px;
}
</style>
